<template>
  <div class="main">
    <div class="areaTable">

      <!-- 项目信息详情 -->
      <el-dialog
  title="项目信息"
  :visible.sync="itemDialogVisible"
  width="50%">
  <div class="itemArea"  style="font-size:18px">
    <div class="top" style="display:flex;justify-content:space-around">
      <div class="top-l" style="width:200px;height:200px">
        <img style="width:100%;height:100%" :src="evUrl+form.item_pic"/>
      </div>
      <div class="top-r" style="padding-top:18px;margin-bottom:10px">
        <div style="margin-bottom:10px">活动标题：{{form.item_tit}}</div>
        <div style="margin-bottom:10px">服务时长：{{form.service_time}}</div>
        <div style="margin-bottom:10px">联系人：{{form.contacts}}</div>
        <div style="margin-bottom:10px">手机号码：{{form.phone}}</div>
        <div style="margin-bottom:10px">岗位名称：{{form.station}}</div>
        <div style="margin-bottom:10px">岗位人数：{{form.num}}</div>
        <div style="margin-bottom:10px">活动地址：{{form.addr}}</div>
        <div style="margin-bottom:10px">活动描述：{{form.item_describe}}</div>
        <!-- <div style="margin-bottom:10px">报名开始时间：{{form.startTime}}</div>
        <div style="margin-bottom:10px">报名截止时间：{{form.endTime}}</div> -->
        <div>活动类型：{{form.item_type}}</div>
      </div>
    </div>
  </div>
</el-dialog>
     <!-- 学校详情 -->
           <el-dialog
  title="学校信息"
  :visible.sync="schoolDialogVisible"
  width="50%">
  <div class="details">
      <div class="detail-l">
        <div class="imgDiv"><img :src="evUrl+(schoolInfo.s_pic)" alt="暂无图片"/></div>
        <span>认证状态:</span>
        <el-tag>{{schoolInfo.e_status==2? '认证通过':'未认证'}}</el-tag>
      </div>
      <div class="detail-r">
        <ul class="iteminfo" style="font-size:20px">
          <li>学校名称：{{schoolInfo.s_realName}}</li>
          <li>手机号码：{{schoolInfo.s_phone}}</li>
          <li>电子邮箱：{{schoolInfo.s_email}}</li>
          <li>学校地址：{{schoolInfo.s_addr}}</li>
          <li>学校简介：{{schoolInfo.s_introduction}}</li>
        </ul>
      </div>
     </div>
</el-dialog>
     <!-- 教师评价 -->
     <el-dialog
  title="请编辑评价内容"
  :visible.sync="teacherDialogVisible"
  width="30%">
  <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="30"
  show-word-limit>
</el-input>
<div style="margin: 20px 0;"></div>
<el-rate
  v-model="value"
  show-text>
</el-rate>
<div style="margin: 20px 0;"></div>
<el-button @click="sendComent" size="mini" type="primary" icon="el-icon-edit">提交</el-button>
</el-dialog>
<el-dialog
  title="提示"
  :visible.sync="failResonShow"
  width="50%">
  <el-result style="color:#F56C6C" icon="info" title="信息提示" :subTitle="'驳回原因:'+newRow.bindReson">
      <template slot="extra">
        <el-button type="primary" @click="doOk" size="medium">确定</el-button>
      </template>
    </el-result>
</el-dialog>
      <el-table
    :data="tableData"
    :cell-style="{textAlign:'center',padding:'7px'}"
    :header-cell-style="{background:'purple',color:'#ffffff',textAlign:'center',padding:'3px',opacity:0.7}"
    style="width: 100%">
    <el-table-column
      label="学校"
      prop="s_name">
    </el-table-column>
    <el-table-column
    label="学校信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="schoolDetails( scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="项目信息">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="itemDetails(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column
      label="项目信息"
      prop="itemId">
    </el-table-column> -->
    <el-table-column
    label="状态"
    prop="status">
      <template slot-scope="scope">
        <el-tag>{{scope.row.status=='1'? '已完成':'进行中'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
    label="评价">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="comment(scope.row)">{{scope.row.comment? '修改':'提交'}}</el-button>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button
          v-if="(scope.row.status=='0'&&scope.row.isBinding==1) || (scope.row.status=='0'&&!scope.row.isBinding)"
          size="mini" type="danger" @click="unbindingSuccess(scope.row)">申请解除</el-button>
          <el-button
          v-if="(scope.row.status=='0'&&scope.row.isBinding==2)"
          size="mini" type="info" disabled>申请解除中</el-button>
          <el-button
          v-if="(scope.row.status=='0'&&scope.row.isBinding==3)"
          size="mini" type="warning" @click="unbindingFail(scope.row)">解除失败</el-button>
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入学校关键字搜索"/>
      </template>

    </el-table-column>
  </el-table>
    </div>
    <div class="footer" style="position:absolute;right:0;bottom:0">
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</div>
  </div>

</template>

<script>
import { TmakeRecord, getAtivityd, teacherComment } from '../api/record'
import { getSchoolDetails } from '../api/index'
import { unbinding } from '../api/info'

export default {
  data () {
    return {
      evUrl: this.$evUrl,
      total: 0,
      currentPage: 1,
      tableData: [],
      newTableData: [],
      newRow: {},
      failResonShow: false,
      search: '',
      itemDialogVisible: false,
      schoolDialogVisible: false,
      teacherDialogVisible: false,
      form: {
      },
      schoolInfo: {},
      textarea: '',
      value: null,
      // 数据id
      recordNum: 0
    }
  },
  methods: {
    // 申请解除
    unbindingSuccess (row) {
      unbinding({ iE: 2, w_id: row.w_id }).then(({ data }) => {
        let index = 0
        this.tableData.forEach(ele => {
          if (row == ele) {
            index = this.tableData.indexOf(ele)
          }
        })
        if (data.status === 200) {
          this.tableData[index].isBinding = '2'
        }
      })
    },
    // 页码跳转
    handleCurrentChange (val) {
      this.currentPage = val
      this.tableData = this.newTableData.slice(this.currentPage * 10 - 10, this.currentPage * 10)
    },
    // 解除失败
    unbindingFail (row) {
      this.newRow = row
      this.failResonShow = true
    },
    // 确定
    doOk () {
      unbinding({ iE: 1, w_id: this.newRow.w_id }).then(({ data }) => {
        let index = 0
        this.tableData.forEach(ele => {
          if (this.newRow == ele) {
            index = this.tableData.indexOf(ele)
          }
        })
        if (data.status === 200) {
          this.tableData[index].isBinding = '1'
          this.failResonShow = false
        }
      })
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    getRecord () {
      const tId = window.localStorage.getItem('id')
      TmakeRecord({ tId: tId }).then(({ data }) => {
        this.total = data.length
        this.newTableData = data
        this.tableData = this.newTableData.slice(0, 10)
      })
    },
    itemDetails (row) {
      this.itemDialogVisible = true
      getAtivityd({ iId: row.itemId }).then(({ data }) => {
        this.form = JSON.parse(JSON.stringify(data.list))
        this.form.activityTime = [data.list.startTime, data.list.endTime]
        const endTime = Date.parse(data.list.endTime)
        const nowTime = Date.parse(new Date())
        if (endTime <= nowTime) {
          this.form.status = '活动已经结束'
        } else {
          this.form.status = '进行中！'
        }
      })
      // console.log(row.itemId)
    },
    schoolDetails (row) {
      this.schoolDialogVisible = true
      getSchoolDetails({ sId: row.s_id }).then(({ data }) => {
        this.schoolInfo = data.info

        // console.log(data)
        // console.log(this.schoolInfo)
      })
      // console.log(row)
    },
    comment (row) {
      this.teacherDialogVisible = true
      this.textarea = row.comment
      this.value = row.level
      this.recordNum = row.w_id
      // console.log(row)
    },
    sendComent () {
      // console.log('good')
      if (this.textarea && this.value) {
        teacherComment({ textarea: this.textarea, recordNum: this.recordNum, value: this.value }).then(({ data }) => {
          this.teacherDialogVisible = false
          this.getRecord()
          // console.log(data)
        })
      } else {
        this.$message.error('请填写数据')
      }
    }
  },
  watch: {
    search (newVal, oldVal) {
      const newArr = this.newTableData.filter(data => !this.search || data.s_name.includes(this.search))
      this.total = newArr.length
      this.tableData = newArr.slice(this.currentPage * 10 - 10, this.currentPage * 10)
    }
  },
  mounted () {
    this.getRecord()
  }
}
</script>
<style scoped lang='less'>
.main{
  .details{
      display: flex;
      height: 400px;
      .detail-l{
        width:30%;
        .imgDiv{
          width: 80%;
          img{
            width: 100%;
            margin-bottom:18px;
          }
        }
      }
      .detail-r{
        width:60%;
        .iteminfo{
          padding: 0;
          li{
            list-style: none;
            padding-left: 20px;
            border-bottom: 1px solid red;
            padding-bottom: 10px;
            margin-bottom:10px;

          }
        }
      }
    }
}
</style>
